.container {
  padding-bottom: 180rpx;
  min-height: 100vh;
  background-color: #f6f6f6;

  .top {
    position: relative;

    .scroll {
      background-color: transparent;
      backdrop-filter: blur(8px); //毛玻璃属性
      // background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    }

    .navbar {
      padding: 0 20rpx;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      // background-color: aqua;
      z-index: 999;
      box-sizing: border-box;

      .navbar-tools {
        position: absolute;

        .search-container {
          padding: 0 10rpx;
          display: flex;
          align-items: center;
          background-color: rgba(0, 0, 0, .5);

          .van-icon {
            margin-right: 10rpx;
            color: #fff;
            font-size: 40rpx;
          }

          .searchIpt {
            color: #fff;
            font-size: 28rpx;
          }
        }
      }
    }

    swiper {
      height: 620rpx;

      swiper-item {

        .swiper-img {
          width: 100%;
          height: 100%;
          border-radius: 0 0 10% 10%;
        }
      }
    }
  }

  .grid {
    padding: 0 20rpx;
    margin-top: -80rpx;
    background-image: linear-gradient(to bottom, #fdfbfb 0%, #f1f1f1 100%);

    .van-grid {
      border-radius: 20rpx;

      .van-grid-item__content {
        background-color: rgba(255, 255, 255, .9);
      }

      .van-icon--image {
        width: 60rpx;
        height: 60rpx;
      }

      .van-grid-item__icon+.van-grid-item__text {
        margin-top: 8rpx;
      }
    }
  }

  .index-title {
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 34rpx;

    &::before {
      content: '';
      display: inline-block;
      margin-right: 10rpx;
      width: 8rpx;
      height: 45rpx;
      border-radius: 8rpx;
      background-color: #1296DB;
    }
  }

  .day-check {
    .check-con {
      position: relative;
      margin: 0 20rpx;
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;

      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 2rpx;
        height: 100%;
        background-color: #f1f1f1;
        z-index: 9;
      }

      &::after {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 2rpx;
        background-color: #f1f1f1;
        z-index: 9;
      }

      // .border1 {
      //   &::before {
      //     content: '';
      //     display: inline-block;
      //     position: absolute;
      //     top: 20rpx;
      //     left: 50%;
      //     transform: translateX(-50%);
      //     width: 2rpx;
      //     height: 170rpx;
      //     background-color: #f1f1f1;
      //   }

      //   &::after {
      //     content: '';
      //     display: inline-block;
      //     position: absolute;
      //     left: 20rpx;
      //     top: 50%;
      //     transform: translateY(-50%);
      //     width: 335rpx;
      //     height: 2rpx;
      //     background-color: #f1f1f1;
      //   }
      // }

      // .border2 {
      //   &::before {
      //     content: '';
      //     display: inline-block;
      //     position: absolute;
      //     right: 20rpx;
      //     top: 50%;
      //     transform: translateY(-50%);
      //     width: 335rpx;
      //     height: 2rpx;
      //     background-color: #f1f1f1;
      //   }

      //   &::after {
      //     content: '';
      //     display: inline-block;
      //     position: absolute;
      //     bottom: 20rpx;
      //     left: 50%;
      //     transform: translateX(-50%);
      //     width: 2rpx;
      //     height: 170rpx;
      //     background-color: #f1f1f1;
      //   }
      // }

      .item {
        position: relative;
        flex: 50%;
        display: flex;
        padding: 20rpx;
        // background-image: url('https: //i.imgtg.com/2023/06/29/OkJC3B.png');
        box-sizing: border-box;


        .img-group {
          width: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: space-around;

          .img1 {
            width: 110rpx;
            height: 110rpx;
          }

          .img2 {
            width: 150rpx;
            height: 150rpx;
          }
        }

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }

        .info {
          display: flex;
          align-items: center;
          position: absolute;
          top: 10rpx;
          left: 20rpx;

          .tit {
            font-size: 28rpx;
          }

          .label {
            display: flex;
            align-items: center;
            margin-left: 10rpx;
            padding: 0 10rpx;
            font-size: 18rpx;
            color: #fff;
            background-color: #f50;
            border-radius: 10rpx;
          }
        }
      }
    }
  }


  .guess-like {
    .goods-con {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      padding: 0 25rpx;
      column-count: 2;

      .goods-item {
        margin-bottom: 20rpx;
        // margin-right: auto;
        width: 340rpx;
        height: auto;
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        break-inside: avoid;

        .goods-img {
          width: 340rpx;

          image {
            width: 100%;
            border-radius: 20rpx;
          }
        }

        .goods-info {
          padding: 10rpx 15rpx 15rpx;

          .goods-title {
            font-size: 32rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .goods-detail {
            color: #999;
            font-size: 26rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .goods-bottom {
            margin-top: 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .goods-price {
              font-size: 30rpx;
              color: #ff2121;
            }

            .addcart {
              image {
                width: 40rpx;
                height: 40rpx;
              }
            }
          }
        }
      }
    }
  }

}